<template>
  <div class="imBtn">
    <el-button type="warning" icon="el-icon-upload2" @click="importBtn">导入</el-button>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
      <p class="upBtn">
        <span>上传文件：</span>
        <el-upload
          :action="importExcelUrl"
          :show-file-list="false"
          :multiple="false"
          :headers="headers"
          :limit="1"
          :on-change="handleChange"
          :on-remove="handleRemove"
          :file-list="fileList"
        >
          <el-button type="warning" icon="el-icon-upload2" @click="importBtn">导入</el-button>
        </el-upload>
      </p>
      <span class="downLoad">注意：仅可上传固定的Excel模板，如需导入模板，可<exportBtn name="下载模版" :url="exportXlsUrl" :params="params" :file-name="fileName" type="text" /></span>
      <span slot="footer">
        <el-button @click="modelClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import exportBtn from '@/components/xm/exportExcel/exportExcel'
export default {
  components: {
    exportBtn
  },
  props: {
    exportXlsUrl: {
      type: String,
      default: '',
      required: true
    },
    params: {
      type: Object,
      default: function() {
        return {}
      },
      required: false
    },
    fileName: {
      type: String,
      default: '模版',
      required: false
    },
    importUrl: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      title: '导入',
      dialogVisible: false,
      fileList: []
    }
  },
  computed: {
    importExcelUrl: function() {
      return `https://www.xinmengjk.cn/${this.importUrl}`
    },
    headers() {
      const head = { 'X-Access-Token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2NzI4MDMzNDAsInVzZXJuYW1lIjoicWtfcXB0X2FkbWluIn0.xSm2bnbcFKiPW1kgSeKlEtkQKlhFPeGb258Is8tOpfo' }
      return head
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    importBtn() {
      this.dialogVisible = true
    },
    handleRemove() {
      this.fileList = []
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    modelClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.imBtn{
	display:inline-block;
	margin-left: 10px;
  text-align:left;
	.upBtn{
		display:flex;
		align-items:center;
	}
	.downLoad{
		margin-top:20px;
		display:block;
		em{
			font-style:normal;
			color:#1890FF;
			cursor: pointer;
		}
	}
}
</style>
